<template>
	<div class="Login">
		<div class="head">
			账户
			<div class="clear"></div>
		</div>
		<div class="portrait">
				<img :src="imgUrl" height="200" width="200">
		</div>
		<div class="form">
			<Form :model="form"  ref="form">
				<div  class="int">
					<FormItem ref="form" prop="account">
						<Row>
							<Col span="5" class="imge" >
								<img :src="use" alt="" height="20px" width="20px">
							</Col>
							<Col span="12">
									<Input type="text" prop="account" placeholder="账号" v-model="form.account"/>
							</Col>
						</Row>
					</FormItem>
				</div>
				<div class="int">
					<FormItem ref="form" prop="password" >
						<Row>
							<Col span="5"class="imge">
								<img :src="psw" alt=""  height="20px" width="20px">
							</Col>
							<Col span="12">
								<Input type="password" placeholder="密码" v-model="form.password"></Input>
							</Col>
						</Row>
					</FormItem>
				</div>
				<div class="Cbox">
					<input type="checkbox" class="inp" v-model="che"/><label class="lab">Remember</label>
				</div>
				<Row>
					<div>
						<Col span="12">
							<Button type="default" class="btn" @click="login">登录</Button>
						</Col>
						<Col span="12">
							<Button type="default" class="btn" @click="logon">注册</Button>
						</Col>
					</div>
				</Row>
			</Form>
		</div>
		<div class="bind">
			账号绑定：
			<button class="btn"><img :src="WeChat" alt="" height="40px" width="40px"></button>
			<button class="btn"><img :src="qq" alt="" height="40px" width="40px"></button>
			<button class="btn"><img :src="Alipay" alt="" height="40px" width="40px"></button>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "BackstageLogin",
		data(){
			return {
				imgUrl: require('../../assets/default.png'),
				WeChat:require("../../assets/wx.png"),
				qq:require("../../assets/qq.png"),
				Alipay:require("../../assets/zfb.png"),
				use:require("../../assets/use.png"),
				psw:require("../../assets/password.png"),
				che:'',
				form:{
					account:"",
					password:"",
				},
			}
		},
		mounted() {
				if(localStorage.account!=null){
					this.form.account =localStorage.account
					this.che = true
				}
				if(localStorage.headimg!=null){
					this.imgUrl = require('../../img/'+localStorage.headimg);
				}else {
					this.imgUrl = require('../../assets/default.png')
				}
		},
		methods:{
			async login(){
				if(this.form.account==""){
					this.$Message.info('请输入账号');
				}
				if(this.form.password==""){
					this.$Message.info('请输入密码');
				}else{
					let use = await axios.post('/reception/login',this.form).then(r=>r.data)
					console.log(use)
					if (use.status) {
						if (use.type) {
							if (this.che) {
								localStorage.account = (use.account)
								localStorage.headimg = (use.headimg)
							}
							localStorage.setItem('users',JSON.stringify(use.user[0]));
							// localStorage.users = JSON.stringify(use.user[0])
							return this.$router.push('/users/index')
						} else {
							if (this.che) {
								localStorage.account = (use.account)
							}
							localStorage.id = JSON.stringify(use.user[0])
							this.$store.commit('updateId',use.user[0])
							return this.$router.push('/backstage/')
						}
					}
				console.log(this.che)
					if(this.che){
						localStorage.account = (use.user[0].account)
					}
				this.$Message.error(use.msg)
				}
			},
			logon(){
				return this.$router.push('/users/logon')
			}
		}
	}
</script>

<style lang="less">
	.Login{
		/*width: 100%;*/
		max-width: 375px;
		margin: auto;
		height: 100%;
		.head{
			height: 35px;
			color: aliceblue;
			width: 100%;
			background: rgb(155,177,200);
			font-size: 22px;
			text-align: center;
			line-height: 1.5;
		}
		.btn1{
			background: aliceblue;
			font-size: 10px;
			margin-top: 7px ;
			margin-left: -1px;
			color: rgb(155,177,200) ;
			height: 22px;
			padding: 0px 5px;
			border:1px aliceblue solid;
			border-radius:10%;
			cursor: pointer;
			float: left;

		}
		.box{
			width: 0;
			height: 0;
			margin-top: 7px ;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid aliceblue;
		}
		.clear{
			clear: both;
		}
		.portrait{
			margin: 15px auto;
			height: 230px;
			width: 230px;
			border-radius:50%;
			border: rgba(176,193,209) solid 8px;
			padding: 7px;
		}
		.portrait>img{
			border: 0px;
			border-radius:50%;
		}
		.form{
			width: 100%;
		}
		.int{
			position: relative;
			top: 10px;
			left: 25px;
			height: 50px;
			width: 86%;
			text-align: center;
			background-color: #F27573;
			border-radius: 5px;
			margin-bottom: 10%;
			vertical-align: middle;

		}
		.imge{
			padding-top: 13px;
		}
		.ivu-input {
			width: 200px;
			height: 20px;
			border-radius: 0px;
			margin-top: 13px;
		}
		.btn{
			margin-left: 25px;
			width: 140px;
			height: 45px;
			background-color: #9AB0C8;
			color: aliceblue;
			font-size: 20px;
		}
		.Cbox{
			width: 86%;
			height: 20px;
			margin: auto;
			margin: 20px 0;
			text-align: right;
		}
		.inp{
			width: 25px;
			height: 25px;
			border-radius: 10px;
			vertical-align:middle;
			background-color: #AFC1D3;
		}
		.lab{
			font-size: 12px;
			vertical-align:middle;
			color: #B6C0CD;
		}
		.bind{
			margin: 50px;
			margin-bottom: 0px;
			width: 310px;
			height: 50px;
			text-align: right;
			color: #D58086;
			font-size: 17px;
			vertical-align:middle;
		}
		.bind>.btn{
			width: 40px;
			height: 40px;
			background-color: #F27571;
			border: 0px;
			border-radius: 5px;
			vertical-align: middle;
			margin-left: 5px;
		}
	}
</style>